<template>
  <div class="create-outfit-form">
    <div class="form-header">
      <h3>创建新搭配</h3>
    </div>
    
    <!-- 搭配名称 -->
    <div class="form-item">
      <label class="form-label">搭配名称</label>
      <input
        type="text"
        v-model="outfitName"
        placeholder="请输入搭配名称"
        class="form-input"
        maxlength="20"
      />
    </div>
    
    <!-- 季节选择 -->
    <div class="form-item">
      <label class="form-label">适合季节</label>
      <DropdownMenu>
        <DropdownItem
          v-model="selectedSeason"
          :options="seasonOptions"
          placeholder="请选择季节"
        />
      </DropdownMenu>
    </div>
    
    <!-- 场合选择 -->
    <div class="form-item">
      <label class="form-label">适合场合</label>
      <DropdownMenu>
        <DropdownItem
          v-model="selectedOccasions"
          :options="occasionOptions"
          placeholder="请选择场合"
          multiple
        />
      </DropdownMenu>
    </div>
    
    <!-- 温度范围 -->
    <div class="form-item">
      <label class="form-label">适合温度</label>
      <div class="temperature-range">
        <input
          type="number"
          v-model="minTemperature"
          placeholder="最低温度"
          class="temperature-input"
          min="-20"
          max="40"
        />
        <span class="temperature-separator">-</span>
        <input
          type="number"
          v-model="maxTemperature"
          placeholder="最高温度"
          class="temperature-input"
          min="-20"
          max="40"
        />
        <span class="temperature-unit">°C</span>
      </div>
    </div>
    
    <!-- 选择衣物 -->
    <div class="form-item">
      <label class="form-label">选择衣物</label>
      <div class="clothes-selection">
        <!-- 上衣选择 -->
        <div class="category-selection">
          <div class="category-title">上衣</div>
          <div class="clothes-list">
            <div 
              v-for="clothes in topClothes"
              :key="clothes.id"
              class="clothes-item"
              :class="{ selected: selectedClothes.includes(clothes.id) }"
              @click="toggleClothesSelection(clothes.id)"
            >
              <img :src="clothes.image" alt="{{ clothes.name }}" class="clothes-thumbnail" />
              <div class="clothes-name">{{ clothes.name }}</div>
            </div>
          </div>
        </div>
        
        <!-- 下装选择 -->
        <div class="category-selection">
          <div class="category-title">下装</div>
          <div class="clothes-list">
            <div 
              v-for="clothes in bottomClothes"
              :key="clothes.id"
              class="clothes-item"
              :class="{ selected: selectedClothes.includes(clothes.id) }"
              @click="toggleClothesSelection(clothes.id)"
            >
              <img :src="clothes.image" alt="{{ clothes.name }}" class="clothes-thumbnail" />
              <div class="clothes-name">{{ clothes.name }}</div>
            </div>
          </div>
        </div>
        
        <!-- 外套选择 -->
        <div class="category-selection">
          <div class="category-title">外套</div>
          <div class="clothes-list">
            <div 
              v-for="clothes in outerwearClothes"
              :key="clothes.id"
              class="clothes-item"
              :class="{ selected: selectedClothes.includes(clothes.id) }"
              @click="toggleClothesSelection(clothes.id)"
            >
              <img :src="clothes.image" alt="{{ clothes.name }}" class="clothes-thumbnail" />
              <div class="clothes-name">{{ clothes.name }}</div>
            </div>
          </div>
        </div>
        
        <!-- 鞋子选择 -->
        <div class="category-selection">
          <div class="category-title">鞋子</div>
          <div class="clothes-list">
            <div 
              v-for="clothes in shoesClothes"
              :key="clothes.id"
              class="clothes-item"
              :class="{ selected: selectedClothes.includes(clothes.id) }"
              @click="toggleClothesSelection(clothes.id)"
            >
              <img :src="clothes.image" alt="{{ clothes.name }}" class="clothes-thumbnail" />
              <div class="clothes-name">{{ clothes.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 搭配描述 -->
    <div class="form-item">
      <label class="form-label">搭配描述</label>
      <textarea
        v-model="outfitDescription"
        placeholder="请输入搭配描述（可选）"
        class="form-textarea"
        maxlength="200"
        rows="4"
      ></textarea>
    </div>
    
    <!-- 操作按钮 -->
    <div class="form-actions">
      <van-button type="default" @click="$emit('cancel')">取消</van-button>
      <van-button type="primary" @click="createOutfit" :disabled="!canCreate">创建搭配</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useClothesStore } from '../store/clothes';
import { DropdownMenu, DropdownItem } from 'vant';

const clothesStore = useClothesStore();

// 定义事件
const emit = defineEmits(['cancel', 'success']);

// 表单数据
const outfitName = ref('');
const selectedSeason = ref('');
const selectedOccasions = ref([]);
const minTemperature = ref('');
const maxTemperature = ref('');
const outfitDescription = ref('');
const selectedClothes = ref([]);

// 季节选项
const seasonOptions = [
  { value: 'spring', text: '春季' },
  { value: 'summer', text: '夏季' },
  { value: 'autumn', text: '秋季' },
  { value: 'winter', text: '冬季' },
  { value: 'all', text: '全年' }
];

// 场合选项
const occasionOptions = [
  { value: 'daily', text: '日常' },
  { value: 'work', text: '工作' },
  { value: 'party', text: '聚会' },
  { value: 'sports', text: '运动' },
  { value: 'formal', text: '正式场合' },
  { value: 'other', text: '其他' }
];

// 分类衣物列表
const topClothes = computed(() => 
  clothesStore.clothesList.filter(item => item.type === 'top')
);

const bottomClothes = computed(() => 
  clothesStore.clothesList.filter(item => item.type === 'bottom')
);

const outerwearClothes = computed(() => 
  clothesStore.clothesList.filter(item => item.type === 'outerwear')
);

const shoesClothes = computed(() => 
  clothesStore.clothesList.filter(item => item.type === 'shoes')
);

// 是否可以创建搭配
const canCreate = computed(() => {
  return outfitName.value.trim() !== '' && selectedClothes.value.length > 0;
});

// 切换衣物选择
const toggleClothesSelection = (clothesId) => {
  const index = selectedClothes.value.indexOf(clothesId);
  if (index > -1) {
    selectedClothes.value.splice(index, 1);
  } else {
    selectedClothes.value.push(clothesId);
  }
};

// 创建搭配
const createOutfit = () => {
  // 验证表单
  if (!canCreate.value) return;
  
  const newOutfit = {
    id: Date.now().toString(), // 临时ID，实际应用中应由后端生成
    name: outfitName.value.trim(),
    season: selectedSeason.value,
    occasions: selectedOccasions.value,
    minTemperature: minTemperature.value ? parseInt(minTemperature.value) : null,
    maxTemperature: maxTemperature.value ? parseInt(maxTemperature.value) : null,
    description: outfitDescription.value.trim(),
    clothesIds: selectedClothes.value,
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString()
  };
  
  // 提交新搭配
  try {
    // 这里应该调用API创建搭配
    // 目前使用模拟数据
    console.log('创建新搭配:', newOutfit);
    
    // 触发成功事件
    emit('success', newOutfit);
    
    // 重置表单
    resetForm();
  } catch (error) {
    console.error('创建搭配失败:', error);
    alert('创建失败，请重试');
  }
};

// 重置表单
const resetForm = () => {
  outfitName.value = '';
  selectedSeason.value = '';
  selectedOccasions.value = [];
  minTemperature.value = '';
  maxTemperature.value = '';
  outfitDescription.value = '';
  selectedClothes.value = [];
};
</script>

<style scoped>
.create-outfit-form {
  padding: 20px;
}

.form-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.form-item {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  transition: border-color 0.3s;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: #409eff;
}

.temperature-range {
  display: flex;
  align-items: center;
  gap: 10px;
}

.temperature-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  text-align: center;
}

.temperature-separator {
  color: #999;
}

.temperature-unit {
  color: #999;
  font-size: 14px;
}

.clothes-selection {
  max-height: 400px;
  overflow-y: auto;
}

.category-selection {
  margin-bottom: 20px;
}

.category-title {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  margin-bottom: 10px;
}

.clothes-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.clothes-item {
  width: 80px;
  cursor: pointer;
  position: relative;
}

.clothes-item.selected {
  opacity: 0.8;
}

.clothes-item.selected::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.clothes-thumbnail {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  object-fit: cover;
  border: 2px solid #e4e7ed;
}

.clothes-item.selected .clothes-thumbnail {
  border-color: #409eff;
}

.clothes-name {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

.form-actions .van-button {
  flex: 1;
  height: 44px;
  border-radius: 6px;
}

/* 滚动条样式 */
.clothes-selection::-webkit-scrollbar {
  width: 6px;
}

.clothes-selection::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.clothes-selection::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.clothes-selection::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

@media (max-width: 768px) {
  .create-outfit-form {
    padding: 16px;
  }
  
  .clothes-item {
    width: 70px;
  }
  
  .clothes-thumbnail {
    width: 70px;
    height: 70px;
  }
}
</style>